<template>
  <div>
    <div class="background">
      <img alt="" height="100%" src="../../../public/img/background.jpg" width="100%"/>
    </div>
    <div class="front">
      <div class="login-box">
        <div class="login-box-body" style="border-radius: 20px">
          <div class="login-logo">
            <a><b>Depot仓储</b><br>后台管理系统</a>
          </div>
          <!-- /.login-logo -->
          <p class="login-box-msg">登录系统</p>

          <form action="" method="post">
            <div class="form-group has-feedback">
              <input class="form-control" id="username" name="username" placeholder="用户名" type="text" v-model="username">
              <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <input class="form-control" id="password" name="password" placeholder="密码" type="password" v-model="password">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
              <div class="col-xs-8">
                <div class="checkbox icheck">
                  <label><input id="remember" name="remember" type="checkbox"> 记住 下次自动登录</label>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12">
                <button class="btn btn-primary btn-block btn-flat" @click="login" type="button">登录</button>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12">
                <router-link to="/register" class="pull-right" style="margin-top: 10px">注册仓库实例 &gt;</router-link>
              </div>
            </div>
          </form>

        </div>
        <!-- /.login-box-body -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  data(){
    return {
      username: "",
      password: "",
      isRemenber: 0
    }
  },
  methods:{
    login(){
      if(this.username===""){
        this.$message.warning("用户名不得为空");
      }else{
        if(this.password===""){
          this.$message.warning("密码不得为空");
        }
        else{
          let user = this.GLOBAL.appData.userList.filter((e)=>{
            return e.username===this.username&&e.password===this.password;
          })[0];
          if(user!==undefined){
            let remember = $('#remember').is(':checked') ? 1 : 0;
            let userInfo = {
              "id": user.id,
              "username": this.username,
              "password": this.password,
              "loginDateTime": (new Date().toLocaleString())
            }
            if(remember===0)
              sessionStorage.setItem("repoUserInfo", JSON.stringify(userInfo));
            else
              localStorage.setItem("repoUserInfo", JSON.stringify(userInfo));
            this.$router.replace('/main');
          }
          else {
            this.$message.error("用户名或密码不正确！");
          }
        }
      }
    }
  },
  mounted() {
    $(function () {
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
      });
    });
  }
}
</script>

<style scoped>
.background{
  width:100%;
  height:100%;
  z-index:-1;
  position: absolute;
}
.front{
  z-index:1;
  position: absolute;
  left: 5vw;
  top: 5vh;
  width: 90vw;
  height: 90vh;
}
</style>
